<template>
	<view>
		<view class="item">
			<view class="container" v-for="(apply,index) in applyList" :key="index" @longpress="removeApply(index)" @tap="toPersonInfo(index)">
				<view class="avatar-container">
					<image class="avatar"  :src="apply.from.avatar"></image>
				</view>
				<view class="content">
					<text class="name">{{apply.from.nickname}}</text>
					<text class="preview">{{'D id:  '+apply.from.loginId}}</text>
				</view>
				<view class="group-apply" v-show="apply.type=='group-apply'">
					<text>{{apply.type=='group-apply'?'申请加入群聊:'+apply.group.name+'\n(群id:'+apply.group.id+')':''}}</text>
				</view>
				<view class="group-apply" v-show="apply.type=='invite-group'">
					<text>{{apply.type=='invite-group'?'邀请你入群聊:'+apply.group.name+'\n(群id:'+apply.group.id+')':''}}</text>
				</view>
				<view class="time-container">
					<text class="time">{{showLastTime(apply.time)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateUtil from 'util/date';
	import {mapGetters,mapActions} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapGetters(['applyList']),
		},
		methods: {
			...mapActions(['deleteApply']),
			showLastTime(lastTime){
				let gap = dateUtil.TimeDifference(lastTime,dateUtil.getTimeNow());
				if(gap==0){
					let date = new Date(lastTime);
					return date.getHours()+":"+date.getMinutes();
				}
				else if(gap==1) return "昨天";
				else if(gap==2) return "前天";
				else{
					let date = new Date(lastTime);
					return (date.getMonth()+1)+"月"+date.getDate()+"日";
				}
			},
			toPersonInfo(index){
				//入群邀请
				if(this.applyList[index].type=='invite-group'){
					uni.navigateTo({
						url:'./groupInfo?index='+index,
						animationType:'slide-in-right',
					})
				}else{
					//好友或者入群申请
					uni.navigateTo({
						url:'./info?index='+index,
						animationType:'slide-in-right',
					})
				}
			},
			removeApply(index){
				let that = this;
				uni.showModal({
					title:'删除申请',
					confirmText:'确定',
					cancelText:'取消',
					confirmColor:'#D94B4D',
					content:'拒绝但是不会告知对方',
					success:function(res){
						if(res.confirm){
							that.deleteApply(index);
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.group-apply{
		margin:auto;
		font-weight: 800;
		color: #000000;
		text-align: center;
	}
	.time-container{
		margin-left: auto;
		margin-right: 20rpx;
		display: flex;
	}
	.time{
		font-size: smaller;
		margin-top: auto;
		margin-bottom: auto;
		text-align: center;
	}
	.preview{
		margin-bottom: 0;
		font-size: smaller;
	}
	.item{
		border-radius: 15rpx;
		/* background-color: rgb(200,199,204); */
	}
	.item :hover{
		border-radius: 15rpx;
		background-color: rgb(200,199,204); 
	}
	.container{
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		background-color: #e1e1e1;
	}
	
	.avatar-container{
		position: relative;
		margin: 10rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border-radius: 20rpx;
	}
	.content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.name{
		text-align: left;
		margin-top: 0;
		font-weight: 1000;
		font-size: large;
	}
</style>
